import "./select_time_button.scss";

export default defineComponent({
	name: "SelectTimeButton",
	setup() {
		return () => (
			<div class="css-p8muss">
				<div class="flex">
					<div class="button-group css-1kl6l1j">
						<button
							class="toolbar-button css-jp0mh7-toolbar-button"
							aria-label="Time range picker with current time range Last 1 hour selected"
							aria-expanded="false"
							data-testid="data-testid TimePicker Open Button"
							aria-controls="TimePickerContent"
						>
							<div class="css-1vzus6i-Icon">
								<svg
									id="Layer_1"
									data-name="Layer 1"
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 24 24"
									width="18"
									height="18"
									class="css-sr6nr"
								>
									<path d="M12,6a.99974.99974,0,0,0-1,1v4H9a1,1,0,0,0,0,2h3a.99974.99974,0,0,0,1-1V7A.99974.99974,0,0,0,12,6Zm0-4A10,10,0,1,0,22,12,10.01146,10.01146,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8.00917,8.00917,0,0,1,12,20Z"></path>
								</svg>
							</div>
							<div class="css-1i2o8lj">
								<span class="css-15dl6a3">
									<span>Last 1 hour</span>
									<span class="css-1n2bi9n"></span>
								</span>
							</div>
							<div class="css-1vzus6i-Icon">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="css-sr6nr">
									<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
								</svg>
							</div>
						</button>
						<button class="toolbar-button css-jp0mh7-toolbar-button" aria-label="Zoom out time range">
							<div class="css-1vzus6i-Icon">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="css-sr6nr">
									<path d="M21.71,20.29,18,16.61A9,9,0,1,0,16.61,18l3.68,3.68a1,1,0,0,0,1.42,0A1,1,0,0,0,21.71,20.29ZM11,18a7,7,0,1,1,7-7A7,7,0,0,1,11,18Zm4-8H7a1,1,0,0,0,0,2h8a1,1,0,0,0,0-2Z"></path>
								</svg>
							</div>
						</button>
					</div>
				</div>
			</div>
		);
	}
});
